{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrastyle %}
{{ block.super }}
<style>
    .leaderboard-container {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }
    .stat-card {
        background: white;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        text-align: center;
    }
    .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: #007bff;
    }
    .stat-label {
        font-size: 14px;
        color: #6c757d;
    }
    .leaderboard-table {
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .table-header {
        background: #007bff;
        color: white;
        padding: 15px;
        font-weight: bold;
    }
    .leaderboard-row {
        display: grid;
        grid-template-columns: 80px 1fr 100px 100px 100px 150px;
        gap: 10px;
        padding: 15px;
        border-bottom: 1px solid #e9ecef;
        align-items: center;
    }
    .leaderboard-row:nth-child(even) {
        background: #f8f9fa;
    }
    .rank-badge {
        background: #007bff;
        color: white;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }
    .action-buttons {
        display: flex;
        gap: 10px;
    }
    .action-btn {
        padding: 5px 10px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        text-decoration: none;
        font-size: 12px;
    }
    .action-btn.primary {
        background: #007bff;
        color: white;
    }
    .action-btn.secondary {
        background: #6c757d;
        color: white;
    }
</style>
{% endblock %}

{% block content %}
<div class="leaderboard-container">
    <h1>{{ title }}</h1>
    
    <!-- 统计信息卡片 -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-value">{{ total_users }}</div>
            <div class="stat-label">总用户数</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ avg_score }}</div>
            <div class="stat-label">平均积分</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ max_score }}</div>
            <div class="stat-label">最高积分</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ total_answers }}</div>
            <div class="stat-label">总答题数</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ correct_answers }}</div>
            <div class="stat-label">正确答题数</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ overall_accuracy }}%</div>
            <div class="stat-label">总体正确率</div>
        </div>
    </div>
    
    <!-- 操作按钮 -->
    <div style="margin-bottom: 20px;">
        <a href="/admin/challenge/update_ranks/" class="action-btn primary">
            立即更新排名
        </a>
        <a href="/admin/challenge/stats/" class="action-btn secondary">
            查看详细统计
        </a>
        <a href="/admin/challenge/userscore/" class="action-btn secondary">
            管理用户积分
        </a>
    </div>
    
    <!-- 排行榜表格 -->
    <div class="leaderboard-table">
        <div class="table-header">
            <div class="leaderboard-row">
                <div>排名</div>
                <div>用户</div>
                <div>总积分</div>
                <div>答题数</div>
                <div>正确率</div>
                <div>最后更新</div>
            </div>
        </div>
        
        <div class="table-body">
            {% for user in top_users %}
            <div class="leaderboard-row">
                <div>
                    <span class="rank-badge">{{ user.rank }}</span>
                </div>
                <div>
                    <strong>{{ user.user.username }}</strong><br>
                    <small style="color: #6c757d;">ID: {{ user.user.id }}</small>
                </div>
                <div>
                    <strong>{{ user.total_score }}</strong>
                </div>
                <div>
                    {{ user.answer_count }}
                </div>
                <div>
                    {{ user.accuracy_rate }}
                </div>
                <div>
                    {{ user.last_updated|date:"Y-m-d H:i" }}
                </div>
            </div>
            {% empty %}
            <div class="leaderboard-row" style="justify-content: center;">
                <div>暂无用户数据</div>
            </div>
            {% endfor %}
        </div>
    </div>
    
    <!-- 分页信息 -->
    <div style="margin-top: 20px; text-align: center; color: #6c757d;">
        显示前 {{ top_users|length }} 名用户（共 {{ total_users }} 名用户）
    </div>
</div>
{% endblock %}